import React from 'react'
import style from './style.lightbox'
import Modal from '../modal'
import { Indicator } from '../loading'
import Link from '../link'
import util from '../../util'

export default
class Lightbox extends React.Component {

  ratio = 9/11

  state = {
    maxHeight: this.getMaxHeight(),
    loadMap: {}
  }

  getMaxHeight() {
    return document.documentElement.clientHeight* this.ratio
  }

  bind() {
    util.bind(window, 'resize', this.onResize)
  }

  unbind() {
    util.unbind(window, 'resize', this.onResize)
  }

  static propsType = {
    images: React.PropTypes.array,
    currentImage: React.PropTypes.number,
    active: React.PropTypes.bool,
    onLoad: React.PropTypes.func,
    onClose: React.PropTypes.func,
    onNext: React.PropTypes.fun,
    onPrev: React.PropTypes.func
  }

  onResize = () => {
    this.setState({
      maxHeight: this.getMaxHeight()
    })
  }

  componentWillUnmount() {
    util.unbind(window, 'resize', this.onResize)
    util.unbind(document, 'keydown', this.handleKeyDown)
  }

  componentWillReceiveProps(props) {
    if (!this.props.active && props.active) {
      this.bind()
    } 
    if (this.props.active && !props.active) {
      this.unbind()
    }

    if (props.currentImage != null) {
      if (props.images.length) {
        if (!props.images[props.currentImage].large) {
          props.onLoad(props.currentImage, props.images[props.currentImage])
        } else {
          if (!this.state.loadMap[props.currentImage]) {
            let img = new Image()
            img.src = props.images[props.currentImage].large
            img.onload = () => {
              this.setState({
                loadMap: {
                  [props.currentImage]: {
                    done: true
                  }
                }
              })
            }
            this.setState({
              loadMap: {
                [props.currentImage]: {
                  done: false
                }
              }
            })
          }
        }
      }
    }
    /*
    if (props.currentImage != null) {
      if (props.images.length) {
        if (props.images[props.currentImage]) {
          if (!props.images[props.currentImage].large && !this.loadMap[props.currentImage]) {
            props.onLoad(props.currentImage, props.images[props.currentImage])
            this.loadMap[props.currentImage] = {
              done: false
            }
          }
        }
      }
    }
    */
  }

  handleKeyDown = (e) => {

    const { images=[], currentImage } = this.props
    // left
    if (e.which == 37 && currentImage > 0) {
      this.props.onPrev()
    }

    // right
    if (e.which == 39 && currentImage < images.length-1) {
      this.props.onNext()
    }

    // bind esc close
    if(e.which == 27) {
      this.props.onClose()
    }
  }

  componentDidMount() {
    util.bind(document, 'keydown', this.handleKeyDown)
  }

  render() {
    const { images, currentImage } = this.props
    const image = currentImage === null? {}: images.filter((_, i) => i == currentImage)[0]
    return (
      <Modal
        className={style.root}
        onRequestClose={this.props.onClose}
        active={this.props.active}
      >
        <div className={style.body}>
          <figure className={style.figure}>
            {
              (image && image.large && this.state.loadMap[currentImage] && this.state.loadMap[currentImage].done)?
              <a className={style['show-full']} target="_blank" href={image.large}>
                <img 
                  style={{
                    maxHeight: this.state.maxHeight + 'px'
                  }}
                  src={image.large}/>
              </a>
              : <Indicator/>
            }
            <Link onClick={this.props.onClose} icon="close" color="white" size="30" className={style['close-lightbox']}/>
          </figure>
          {
            currentImage == 0? null: (
              <Link 
                size="50" 
                className={style.prev} 
                icon="arrow" 
                onClick={this.props.onPrev}
              />
            )
          }
          {
            currentImage == images.length-1? null: (
              <Link 
                size="50" 
                className={style.next} 
                icon="arrow" 
                onClick={this.props.onNext}
              />
            )
          }
          <p className={style.index}>{ currentImage+1 } / { images.length }</p>
        </div>
      </Modal>
    )
  }
}
